<template>
	<div id="main">
		<el-container>
			<el-aside class="menu" :width="menuWidth">
				<el-container>
					<el-aside class="first" width="66px">
						<div class="logo">
							<img src="@/assets/image/logo.png">
						</div>
						<ul>
							<li v-for="(menu, index) in menus" @click="menuChange(index)"
								v-bind:class="{active:index == menuIndex}" :key="index">
								<div>
									<i :class="menu.icon"></i><span>{{menu.text}}</span>
								</div>
							</li>
						</ul>
					</el-aside>
					<el-aside class="second" width="200px">
						<el-scrollbar height="100%">
							<div class="center">
								Manager Center
							</div>
							<el-divider>Menu</el-divider>

							<el-menu v-if="menuIndex == 0" :default-active="menuPostion">
								<router-link to="/home">
									<el-menu-item index="1"><i class="i i-home"></i>详细信息</el-menu-item>
								</router-link>
								<router-link to="/work">
									<el-menu-item index="2"><i class="i i-work"></i>录入信息</el-menu-item>
								</router-link>
                <router-link to="/Cgjsdan">
                  <el-menu-item index="8"><i class="i el-icon-s-order"></i>采购结算单</el-menu-item>
                </router-link>
                <router-link to="/Xsjsdan">
                  <el-menu-item index="9"><i class="i el-icon-s-order"></i>销售结算单</el-menu-item>
                </router-link>
                <el-submenu index="10">
                  <template #title ><i  class="i el-icon-setting"></i>系统设置</template>
                  <router-link to="/company">
                    <el-menu-item index="4"><i class="i i-work"></i>供货公司</el-menu-item>
                  </router-link>
                  <router-link to="/TakeOver">
                    <el-menu-item index="5"><i class="i i-work"></i>收货公司</el-menu-item>
                  </router-link>
                  <router-link to="/ProductName">
                    <el-menu-item index="6"><i class="i i-work"></i>品名</el-menu-item>
                  </router-link>
                  <router-link to="/EndUser">
                    <el-menu-item index="7"><i class="i i-work"></i>终端用户</el-menu-item>
                  </router-link>
                  <router-link to="/setting">
                    <el-menu-item index="3"><i class="i el-icon-s-tools"></i>设置</el-menu-item>
                  </router-link>
                </el-submenu>
							</el-menu>

						</el-scrollbar>
					</el-aside>
				</el-container>
			</el-aside>
			<el-container>
				<el-header>
					<div class="nav">
						<i v-if="fold" class="el-icon-s-fold fold" @click="foldToggle"></i>
						<i v-else class="el-icon-s-unfold fold" @click="foldToggle"></i>
						<el-breadcrumb separator="/">
							<el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
								<router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
								<a v-else>{{item.name}}</a>
							</el-breadcrumb-item>
						</el-breadcrumb>
					</div>

					<div class="username">
						<!--<span>
                            <el-badge value="0" :max="9" type="danger">
                                <i class="el-icon-chat-line-round fs18"></i>
                            </el-badge>
                        </span>-->
						<!--<span @click="refresh"><i class="el-icon-refresh fs18"></i></span>-->

						<el-dropdown trigger="hover">
							<span class="el-dropdown-link">
								系统管理员
								<i class="el-icon-arrow-down arrow"></i>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item icon="el-icon-switch-button" @click="logout">退出登录
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</el-header>
				<el-main>
					<el-scrollbar>
						<router-view></router-view>
					</el-scrollbar>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import {
		post
	} from '@/network/request'

	export default {
		data() {
			return {
				fold: true, // 菜单折叠
				menuWidth: '266px', // 菜单宽度
				menus: [{
						text: '首页',
						icon: 'el-icon-s-home',
					},
					// {
					//     text: '模块',
					//     icon: 'el-icon-menu',
					// },
					// {
					//     text: '系统',
					//     icon: 'el-icon-s-tools',
					// }
				],
				menuIndex: 0, // 一级菜单索引
				menuPostion: '', // 二级菜单索引
				current: '', // 当前路由
				menuArray0: [
					'home', 'work'
				],
				menuArray1: [
					'user', 'guideType', 'addGuideType', 'editGuideType', 'guide', 'addGuide', 'editGuide', 'book',
					'seekType', 'addSeekType', 'editSeekType', 'seek', 'grid', 'addGrid', 'editGrid', 'office',
					'addOffice', 'editOffice', 'partyType', 'addPartyType', 'editPartyType', 'party', 'addParty',
					'editParty', 'active', 'addActive', 'editActive', 'tenancy', 'addTenancy', 'editTenancy'
				],
				menuArray2: [
					'system', 'bannerHome', 'bannerGuide', 'bannerParty', 'nav', 'addNav', 'editNav', 'template',
					'suggest', 'manager', 'addManager', 'editManager'
				],
				main: sessionStorage.getItem('main') // 社区主号
			}
		},
		mounted() {
			const path = this.$route.path.substr(1)
			this.navigator(path)
		},
		updated() {
			const path = this.$route.path.substr(1)
			this.navigator(path)
		},
		methods: {
			// 菜单伸缩
			foldToggle() {
				if (this.fold) {
					this.menuWidth = '66px'
					this.fold = false
				} else {
					this.menuWidth = '266px'
					this.fold = true
				}
			},
			// 刷新页面
			refresh() {
				this.$router.go(0);
			},
			// 退出登录
			logout() {
				post('/logout').then(res => {
					const result = res.data
					if (result.code == 200) {
						sessionStorage.removeItem('token')
						this.$router.push('/')
					}
				}).catch()
			},
			// 菜单切换
			menuChange(index) {
				this.menuPostion = '1'
				this.menuIndex = index
				if (index == 0) {
					this.$router.push('/home')
				} else if (index == 1) {
					this.$router.push('/user')
				} else if (index == 2) {
					this.$router.push('/system')
				}
			},
			// 导航跳转
			navigator(path) {
				if (path.indexOf('/') > -1) {
					this.current = path.substr(0, path.indexOf('/'))
				} else {
					this.current = path
				}

				this.menuPostion = ''
				if (this.menuArray0.indexOf(this.current) > -1) {
					this.menuIndex = 0
				} else if (this.menuArray1.indexOf(this.current) > -1) {
					this.menuIndex = 1
				} else if (this.menuArray2.indexOf(this.current) > -1) {
					this.menuIndex = 2
				}

				if (this.current == 'home') {
					this.menuPostion = '1'
				} else if (this.current == 'work') {
					this.menuPostion = '2'
				}
				if (this.current == 'user') {
					this.menuPostion = '1'
				} else if (this.current == 'guideType' || this.current == 'addGuideType' || this.current ==
					'editGuideType') {
					this.menuPostion = '2-1'
				} else if (this.current == 'guide' || this.current == 'addGuide' || this.current ==
					'editGuide') {
					this.menuPostion = '2-2'
				} else if (this.current == 'book') {
					this.menuPostion = '2-3'
				} else if (this.current == 'seekType' || this.current == 'addSeekType' || this.current ==
					'editSeekType') {
					this.menuPostion = '2-4'
				} else if (this.current == 'seek') {
					this.menuPostion = '2-5'
				} else if (this.current == 'grid' || this.current == 'addGrid' || this.current ==
					'editGrid') {
					this.menuPostion = '3'
				} else if (this.current == 'office' || this.current == 'addOffice' || this.current ==
					'editOffice') {
					this.menuPostion = '4'
				} else if (this.current == 'partyType' || this.current == 'addPartyType' || this.current ==
					'editPartyType') {
					this.menuPostion = '5-1'
				} else if (this.current == 'party' || this.current == 'addParty' || this.current ==
					'editParty') {
					this.menuPostion = '5-2'
				} else if (this.current == 'active' || this.current == 'addActive' || this.current ==
					'editActive') {
					this.menuPostion = '6'
				} else if (this.current == 'tenancy' || this.current == 'addTenancy' || this.current ==
					'editTenancy') {
					this.menuPostion = '7'
				}

				if (this.current == 'system') {
					this.menuPostion = '1'
				} else if (this.current == 'bannerHome') {
					this.menuPostion = '2-1'
				} else if (this.current == 'bannerGuide') {
					this.menuPostion = '2-2'
				} else if (this.current == 'bannerParty') {
					this.menuPostion = '2-3'
				} else if (this.current == 'nav' || this.current == 'addNav' || this.current ==
					'editNav') {
					this.menuPostion = '3'
				} else if (this.current == 'template') {
					this.menuPostion = '4'
				} else if (this.current == 'suggest') {
					this.menuPostion = '5'
				} else if (this.current == 'manager' || this.current == 'addManager' || this.current ==
					'editManager') {
					this.menuPostion = '6'
				}
			}
		}
	}
</script>

<style>
</style>
